因為用的是Flutter,所以就直接參考取用其他人的文章來解決安裝與設定環境這件事情了。
好文,好文。希望他順利完賽。
然後我們建立一個範例....一樣直接參考取用其他人的文章來解決產生第一個範例程式這件事情了。
好文,好文。希望他順利完賽x2。
但實際上,我會建議大家使用Android Studio視窗工具上提供的File/New/New Flutter Project就好。
記得Project種類要選擇Flutter,而不是一般Android專案。(因為「New Flutter Project」旁邊就是「New Project」,點到了開啟的就是一般Android專案。)
因為如果輸入的參數(專案名稱、專案路徑)不正確什麼的,其實Android Studio介面上會直接提醒大家。
專案產生後,假設它會自動幫各位找到一份名為main.dart的檔案並打開展示在「程式編輯區」上,然後各位就可以看到main.dart檔的內容,就跟使用Word一樣。
在這份程式碼內,可以看到一段有著以下內容的程式碼...
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// TRY THIS: Try changing the color here to a specific color (to
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
// change color while the other colors stay the same.
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
//
// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
// action in the IDE, or press "p" in the console), to see the
// wireframe for each widget.
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
這整段程式碼的功能與作用主要是決定程式的介面。
很多地方會有著「//」這樣的開頭,這叫做「註解」,它並不會被執行或寫進程式中,這是只存在文件階段中讓工程師閱讀用的,類似提示與說明。
手動刪掉吧~~
刪完會得到這樣的程式碼...
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
然後......
這篇文章就到這裡啦~~
週末嘛~~~請見諒。